<template>
<div>
  <h1>个人基本信息</h1>
  <!-- <HR1/> -->
    <el-form class="info">
        <el-form-item label="用户名" class="h2">
            <span class="information">{{ account }}</span>
        </el-form-item>
        <el-form-item label="账 号" class="h3">
            <span class="information">{{ sid }}</span>
        </el-form-item>
       <el-form-item label="姓 名" class="h4">
            <span class="information">{{ name }}</span>
       </el-form-item>
       <el-form-item label="性 别" class="h5">
            <span class="information">{{ sex }}</span>
       </el-form-item>
       <el-form-item label="电话号码" class="h6">
            <span class="information">{{ tel }}</span>
       </el-form-item>
       <el-form-item label="身份证号" class="h7">
            <span class="information">{{ card }}</span>
       </el-form-item>
       <el-form-item label="个人邮箱" class="h8">
            <span class="information">{{ mail }}</span>
        </el-form-item>
       <el-form-item label="最高学历" class="h9">
            <span class="information">{{ education }}</span>
       </el-form-item>
       <el-form-item label="毕业院校" class="h10">
            <span class="information">{{ school }}</span>
        </el-form-item>
       <el-form-item label="专 业" class="h11">
            <span class="information">{{ major }}</span>
        </el-form-item>
      <el-form-item>
            <el-button class="change" @click="dialogFormVisible=true">修改基本信息</el-button>
      </el-form-item>
      </el-form>

      <el-dialog title="基本信息修改" :visible.sync="dialogFormVisible" width="800px">
          <el-form :v-model="StuInfo">
            <el-row type="flex">
              <el-col>
                <el-form-item label="用户名" label-width="90px" align="left">
                  <el-input v-model="StuInfo.account" autocomplete="off" style="width:250px"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="姓名" label-width="90px" align="left">
                  <el-input v-model="StuInfo.name" autocomplete="off" style="width:250px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="性别" label-width="90px" align="left">
                  <el-select v-model="StuInfo.sex" placeholder="请选择" style="width:120px">
                    <el-option label="男" :value="0"></el-option>
                    <el-option label="女" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="电话号码" label-width="80px" align="left">
                  <el-input v-model="StuInfo.tel" autocomplete="off" style="width:150px"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="最高学历" label-width="90px" align="left">
                  <el-input v-model="StuInfo.education" autocomplete="off" style="width:120px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex">
              <el-col>
                <el-form-item label="个人邮箱" label-width="90px" align="left">
                  <el-input v-model="StuInfo.mail" autocomplete="off" style="width:250px"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="身份证号" label-width="90px" align="left">
                  <el-input v-model="StuInfo.card" autocomplete="off" style="width:250px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex">
              <el-col>
                <el-form-item label="毕业院校" label-width="90px" align="left">
                  <el-input v-model="StuInfo.school" autocomplete="off" style="width:250px"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="专业" label-width="90px" align="left">
                  <el-input v-model="StuInfo.major" autocomplete="off" style="width:250px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <!-- <el-button type="primary" @click="changeStudInfo(StuInfo),dialogFormVisible = false">确 定</el-button> -->
            <el-button type="primary" @click="changeStudInfo">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import fetch from '../api/fetch'
export default {
  data() {
    return {
      dialogFormVisible: false,
      sid: '',
      account: '',
      name: '',
      sex: '',
      age: '',
      tel: '',
      card: '',
      mail: '',
      education: '',
      college: '',
      school: '',
      major: '',
      StuInfo: {
        "account": '',
        "sex": '',
        "name": '',
        "tel": '',
        "card": '',
        // "age": '',
        "mail": '',
        "education": '',
        "college": '',
        "school": '',
        "major": '',
      }
    }
  },
  mounted() {
    this.init();
    //this.loadChangeInfo();
  },
  methods: {
    init() {
      this.getStudentInfo(sessionStorage.getItem('userId'));
    },
    getStudentInfo(sid) {
      fetch.getStudentInfo(sid).then(res => {
        console.log(res)
        this.account = res.data.account;
        this.sid = res.data.sid;
        this.name = res.data.name;
        this.tel = res.data.tel;
        this.card = res.data.card;
        this.mail = res.data.mail;
        this.education = res.data.education;
        this.college = res.data.college;
        this.school = res.data.school;
        this.major = res.data.major;
        if (res.data.sex === 1) {
          this.sex = '女';
        } else {
          this.sex = '男';
        }
        this.loadChangeInfo();
      })
    },
    async changeStudInfo() {
      const result = await fetch.changeStudInfo(this.StuInfo);
      if (result && result.data && result.data.code === 200) {
        this.dialogFormVisible = false;
        this.init();
      }
      // fetch.changeStudInfo(StuInfo).then(res => {
      //   console(StuInfo)
      //   console.log(res)
      // })
    },
    loadChangeInfo() {
      this.StuInfo.account = this.account;
      this.StuInfo.name = this.name;
      this.StuInfo.tel = this.tel;
      this.StuInfo.card = this.card;
      this.StuInfo.mail = this.mail;
      this.StuInfo.education = this.education;
      this.StuInfo.college = this.college;
      this.StuInfo.school = this.school;
      this.StuInfo.major = this.major;
      this.StuInfo.sex = this.sex;
      this.StuInfo.sid= this.sid;
      if(this.sex==='女'){
        this.StuInfo.sex=1;
      }else{
        this.StuInfo.sex=0;
      }
    }
  }
}

</script>

<style>
  h1 {
  position: absolute;
  left: 250px;
  top: 80px;
  width: 200px;
  height: 50px;
  color: rgba(16, 16, 16, 1);
  font-size: 25px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
HR1 {
  position: absolute;
  left: 250px;
  top: 120px;
  width: 80%;
  height: NaNpx;
  border: 1px solid rgba(232, 232, 232, 1);
}

 .info {
  position: absolute;
  left: 200px;
  top: 50px;
  width: 500px;
  height: 600px;
}

.h2 {
  position: absolute;
  left: 70px;
  top: 90px;
  width: 200px;
  height: 30px;
}
.h3 {
  position: absolute;
  left: 510px;
  top: 90px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
.h4{
  position: absolute;
  left: 70px;
  top: 170px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
.h5 {
  position: absolute;
  left: 510px;
  top: 170px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
.h6 {
  position: absolute;
  left: 70px;
  top: 250px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
.h7 {
  position: absolute;
  left: 510px;
  top: 250px;
  width: 200px;
  height: 38px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
.h8 {
  position: absolute;
  left: 70px;
  top: 330px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
  .h9 {
  position: absolute;
  left: 510px;
  top: 330px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
  .h10 {
  position: absolute;
  left: 70px;
  top: 410px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
  .h11 {
  position: absolute;
  left: 510px;
  top: 410px;
  width: 200px;
  height: 20px;
  color: rgba(96, 96, 96, 1);
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

  .change {
    background: rgb(24,144,255);
    color: white;
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    top: 500px;
    left: 300px;
    width: 180px;
    height: 60px;
  }

  .h2 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h3 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h4 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h5 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h6 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h7 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h8 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h9 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h10 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h11 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h12 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .h13 .el-form-item__label {
   color: rgba(96, 96, 96, 1);
   font-size: 20px;
   font-weight: bold;
   text-align: left;
   font-family: SourceHanSansSC-regular;
}
  .information {
   position: absolute;
   left: 150px;
   width:300px;
   color: #1E90FF;
   font-size: 20px;
   font-weight:normal;
   text-align: left;
   font-family: SourceHanSansSC-regular;
  }
</style>
